<script setup>
const titles = ['Model:', 'Max Range', 'Notes', 'Abilities'];
const data = [
  // 1x Mk1 Eyeball
  ['1x Mk1 Eyeball',
    '50 nm',
    ' ',
    'Air Search,Surface Search,Ground Search(Fixed),\n' +
    'Ground Search(Mobile),Range Information,' +
    'Altitude Info,eading Info'],
  //1x Generic Binoculars
  ['1x Generic Binoculars',
    '18 nm',
    'Visual,Binoculars',
    'Visual Technology,Surface Search,Ground Search(Fixed),\n' +
    'Ground Search(Mobile),Heading Info']
];
</script>

<template>
  <div id="data-d-des">

    <table class="center-des">
      <thead>
      <tr>
        <th v-for="title in titles" :key="title">{{ title }}</th>
      </tr>
      </thead>

      <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
      </tbody>

    </table>
  </div>
</template>

<style scoped>
#data-d-des {
  margin: 5px;
  text-align: left;
  border: 1px solid white;
}

.center-des{
  border-collapse: collapse;
  width: 100%;
}

.center-des th,
.center-des td {
  border-bottom: 1px solid #fff;
  padding: 8px;
}

.center-des tbody tr:last-child td {
  border-bottom: none;
}
</style>